<template>
  <div>
    <div class="heade_one">
      <a href="#" @click="go()"><img src="/img/back.png" alt=""/></a>
      <div class="search">
        <input
          type="text"
          placeholder="请输入搜索关键词"
          v-model="value"
          @click="jump()"
        />
      </div>
      <p @click="del()">取消</p>
    </div>
    <div class="content">
      <img src="/img/FDJ.png" alt="" />
      <p>您 查 询 的 商 品 未 上 架</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null
    };
  },

  components: {},

  methods: {
    go() {
      //返回上级
      this.$router.go(-1);
    },
    del() {
      //清除input框内容
      this.value = "";
    },
    jump() {
      //跳转到搜索页
      this.$router.push("/Search");
    }
  }
};
</script>

<style scoped lang="scss">
@import "@/assets/sass/common.scss";
@import "@/assets/sass/vw.scss";
.heade_one {
  display: flex;
  width: vw(750);
  background: #f5f5f5;
  a img {
    height: vw(100);
  }
  .search {
    height: vw(100);

    input {
      width: vw(500);
      height: vw(60);
      border-radius: vw(45);
      margin-left: vw(25);
      margin-top: vw(20);
      border: 0;
    }
  }
  p {
    font-size: vw(30);
    margin-left: vw(30);
    margin-top: vw(29);
    color: #999;
  }
}
.content {
  img {
    width: vw(300);
    height: vw(300);
    padding-top: vw(200);
    padding-left: vw(220);
  }
  p{
    width: vw(750);
    text-align: center;
    font-size: vw(28);
    padding-top: vw(30);
     color: #999;
  }
}
</style>